<template>
  <div class="yjx-drug">
    <div class="search-input" style=" margin: 5px auto ;
  width: 1000px;">
      <Search/>
    </div>
    <div class="yjx-home-floor2">
      <!-- <HealthTips /> -->
      <Carousel class="carousel"/>

    </div>
    <div class="yjx-home-floor4 ">

      <a-card hoverable="true">
        <div class="card-cover">
          <img
              alt="example"
              src="@/assets/img/jz1.jpg"
          />
          <div class="card-cover-text">
            <!-- 这里放置你的文字 -->
            50+
          </div>
        </div>
        <a-card-meta title="集团下设直属机构">

        </a-card-meta>
      </a-card>
      <a-card hoverable="true">
        <div class="card-cover">
          <img
              alt="example"
              src="@/assets/img/jz2.jpg"
          />
          <div class="card-cover-text">
            <!-- 这里放置你的文字 -->
            100+
          </div>
        </div>
        <a-card-meta title="为社会提供100余项服务">

        </a-card-meta>
      </a-card>
      <a-card hoverable="true">
        <div class="card-cover">
          <img
              alt="example"
              src="@/assets/img/jz3.jpg"
          />
          <div class="card-cover-text">
            <!-- 这里放置你的文字 -->
            2024
          </div>
        </div>
        <a-card-meta title="拥有1.5万多名在册服务人员">

        </a-card-meta>
      </a-card>
      <a-card hoverable="true">
        <div class="card-cover">
          <img
              alt="example"
              src="@/assets/img/jz4.jpg"
          />
          <div class="card-cover-text">
            <!-- 这里放置你的文字 -->

          </div>
        </div>
        <a-card-meta title="关于幸福家">

        </a-card-meta>
      </a-card>
      <a-card hoverable>
        <div class="card-cover">
          <img
              alt="example"
              src="@/assets/img/jz5.jpg"
          />
          <div class="card-cover-text">
            <!-- 这里放置你的文字 -->

          </div>
        </div>
        <a-card-meta title=" 幸福到万家">

        </a-card-meta>
      </a-card>

    </div>
    <!-- <time-line /> -->
    <div class="yjx-home-floor3">
      <a-card
          class="big-card"
          style="width: 1200px;font-weight:bold"
          title="常 规 家 政 服 务"
          :tab-list="tabList"
          :active-tab-key="key"
          @tabChange="(key) => onTabChange(key, 'key')"
      >
        <span slot="extra" class="more"
        ><router-link to="/category">更多</router-link></span
        >
        <div class="drug-allCard">
          <a-card
              hoverable
              style="width: 270px"
              class="drug-card"
              v-for="(item,index) in drugInfoList"
              :key="index"
          >
            <img
                slot="cover"
                alt="图片加载失败"
                :src="$store.state.imgBaseUrl + item.picture"
                @click="goToDetails(item.name)"
            />
            <template slot="actions" class="ant-card-actions">
              <div
                  @click="changeDrugStatus(item)"
                  v-if="!nameArr.includes(item.name)"
              >
                <a-icon key="star" type="star"/>&nbsp;收藏
              </div>
              <div @click="changeDrugStatus(item)" v-else>
                <a-icon type="star" theme="filled"/>&nbsp;已收藏
              </div>
              <div @click="goToDetails(item.name)">
                <a-icon key="shopping" type="shopping"/>&nbsp;购买
              </div>
              <div @click="goToDetails(item.name)">
                <a-icon key="profile" type="profile"/>&nbsp;详情
              </div>
            </template>
            <a-card-meta
                :title="item.name"
                description=""
                @click="goToDetails(item.name)"
            >
            </a-card-meta>
            <span
                style="
                color: #f34e0d;
                font-size: 18px;
                display: inline-block;
                margin-top: 8px;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
              "
            >￥{{ parseFloat(item.price).toFixed(2) }}</span
            >
          </a-card>
        </div>
      </a-card>
    </div>
    <Time-line/>
    <!-- 特色服务 -->
    <!-- <NewDrugs /> -->
    <!-- 热门资讯 -->
    <HotTips/>

  </div>
</template>

<script>
import Carousel from "@/components/Carousel.vue";
import HealthTips from "@/components/HealthTips.vue";
import Search from "@/components/Search";
import HotTips from "@/views/home/components/HotTips.vue";
import NewDrugs from "@/views/home/components/NewDrugs.vue";
// import Introduce from '../drug_details/components/Introduce.vue';
import HealthTipDetails from '../health_tips/HealthTipDetails.vue';
import healthtipscategorys from '../health_tips/HealthTipsCategorys.vue'
import TimeLine from '../../components/TimeLine.vue';

export default {
  components: {
    Carousel,
    HealthTips,
    // TimeLine,
    HotTips,
    NewDrugs,
    Search,
    HealthTipDetails,
    healthtipscategorys,
    TimeLine
  },
  name: "Drug",
  data() {
    return {
      tabList: [
        {
          key: "0",
          tab: "保姆",
        },
        {
          key: "1",
          tab: "保洁",
        },
        {
          key: "2",
          tab: "护理",
        },
        {
          key: "3",
          tab: "维修",
        }
      ],
      key: "0",
      drugInfoList: [],
      nameArr: [],
    };
  },
  methods: {
    onTabChange(key, type) {
      // console.log(key, type);
      // console.log(this.tabList[key].tab);
      this[type] = key;
      // console.log(this[type]);
      this.getDrugInfoList();
    },
    /* 获取服务列表 */
    getDrugInfoList() {
      let currentPage = 1;
      let pageSize = 8;
      this.$axios
          .get(
              "/search2/with/" +
              currentPage +
              "/" +
              pageSize +
              "/" +
              this.tabList[this.key].tab
          )
          .then((res) => {
            // console.log(res);
            this.drugInfoList = res.data.data.data.records;
            // console.log(_this.drugInfoList);
          });
    },
    /* 获取当前用户的收藏 */
    getThisUserFavorites() {
      if (this.$store.getters.getUser != null) {
        if (this.$store.getters.getUser.username != null) {
          this.$axios
              .get("/get/collect/name/" + this.$store.getters.getUser.username)
              .then((res) => {
                this.nameArr = res.data.data.data;
              });
        }
      }
    },
    /* 改变服务的收藏状态 */
    changeDrugStatus(item) {
      if (this.$store.getters.getUser != null) {
        if (this.$store.getters.getUser.username != null) {
          let collectInfo = {
            username: this.$store.getters.getUser.username,
            drugName: item.name,
            picture: item.picture,
            price: item.price,
          };
          this.$axios.post("/drug/collect", collectInfo).then((res) => {
            // console.log(res);
            this.getDrugInfoList();
            this.getThisUserFavorites();
            if (res.data.message === "收藏成功！") {
              this.$message.success(res.data.message);
            } else {
              return null;
            }
          });
          // console.log(this.drug);
        } else {
          this.$message.warning("请先登录！");
        }
      } else {
        this.$message.warning("请先登录！");
      }
    },
    /* 跳转到详情页 */
    goToDetails(name) {
      // console.log(name);
      const {href} = this.$router.resolve({
        path: "/drug/" + name,
      });
      window.open(href, "_self");
    },
  },
  created() {
    this.getDrugInfoList();
    this.getThisUserFavorites();
  },
};
</script>

<style>
@import "./style/drug.css";
</style>
